<template>
	<view class="container">
		<!-- 扫码核销入口 -->
		<view class="scan-section" @click="scanQrcode">
			<view class="scan-button">
				<uni-icons type="scan" size="30" color="#fff"></uni-icons>
				<text class="scan-text">扫码核销</text>
			</view>
		</view>

		<!-- 核销记录标题 -->
		<view class="section-title">
			<text>核销记录</text>
		</view>

		<!-- 核销记录列表 -->
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in verificationRecords" :key="index">
				<view class="record-header">
					<text class="order-no">订单号: {{ item.orderNo }}</text>
				</view>
				<view class="record-content">
					<view class="info-row">
						<text class="label">预约场地:</text>
						<text class="value">{{ item.productName }}</text>
					</view>
					<view class="info-row">
						<text class="label">预约时间:</text>
						<text class="value">{{ formatTimeRange(item.startTime, item.endTime) }}</text>
					</view>
					<view class="info-row">
						<text class="label">核销时间:</text>
						<text class="value">{{ item.createTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">核销金额:</text>
						<text class="value">{{ item.productPrice }}元</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="verificationRecords.length === 0 && !loading" class="empty-state">
				<text class="empty-text">暂无核销记录</text>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="verificationRecords.length > 0">
				<text v-if="loading">加载中...</text>
				<text v-else-if="hasMore">上拉加载更多</text>
				<text v-else>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	verifyOrderQRCode,
	getVerificationRecords
} from '@/services/order';

// 核销记录数据
const verificationRecords = ref([]);

// 分页相关
const pageNum = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);
const loading = ref(false);

// 格式化时间范围显示
const formatTimeRange = (startTime, endTime) => {
	if (!startTime || !endTime) return '';

	// 提取时间部分并格式化为 HH:MM
	const formatTime = (timeStr) => {
		if (!timeStr) return '';
		const timePart = timeStr.split(' ')[1]; // 获取时间部分 "07:00:00"
		return timePart ? timePart.substring(0, 5) : ''; // 截取前5位得到 "07:00"
	};

	const start = formatTime(startTime);
	const end = formatTime(endTime);

	return `${start}-${end}`;
};


// 扫码核销
const scanQrcode = () => {
	// 模拟扫码功能
	uni.scanCode({
		success: function (res) {
			console.log('扫码成功: ' + res.result);
			try {
				// 解析二维码内容
				const qrData = JSON.parse(res.result);
				// 调用核销接口
				verifyQRCode(qrData.qrCodeId, qrData.apptProductId);
			} catch (error) {
				console.error('二维码解析失败: ', error);
				uni.showToast({
					title: '二维码格式错误',
					icon: 'none'
				});
			}
		},
		fail: function (err) {
			console.error('扫码失败: ', err);
			uni.showToast({
				title: '扫码失败',
				icon: 'none'
			});
		}
	});
};

// 调用后端核销接口
const verifyQRCode = async (qrCodeId, apptProductId) => {
	try {
		const res = await verifyOrderQRCode(
			qrCodeId,
			apptProductId
		);
		console.log('核销结果: ', res);

		if (res.code === 200) {
			uni.showToast({
				title: '核销成功',
				icon: 'success'
			});
			// 核销成功后刷新列表
			pageNum.value = 1;
			hasMore.value = true;
			await loadVerificationRecords();
		} else {
			uni.showToast({
				title: res.message || '核销失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('核销接口调用失败: ', error);
		uni.showToast({
			title: '核销失败',
			icon: 'none'
		});
	}
};

// 加载核销记录
const loadVerificationRecords = async () => {
	if (loading.value || !hasMore.value) return;

	loading.value = true;
	try {
		const res = await getVerificationRecords({
			pageNum: pageNum.value,
			pageSize: pageSize.value
		});

		if (res.code === 200) {
			verificationRecords.value = [...verificationRecords.value, ...res.data.list];

			// 判断是否还有更多数据
			hasMore.value = verificationRecords.value.length < res.data.total;
		} else {
			uni.showToast({
				title: res.message || '获取核销记录失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取核销记录失败: ', error);
		uni.showToast({
			title: '获取核销记录失败',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

// 加载更多数据
const loadMore = () => {
	if (hasMore.value && !loading.value) {
		pageNum.value++;
		loadVerificationRecords();
	}
};

// 页面显示时刷新数据
onLoad(() => {
	pageNum.value = 1;
	hasMore.value = true;
	loadVerificationRecords();
});

// 监听用户上拉触底
onReachBottom(() => {
	loadMore();
});
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

// 扫码核销入口
.scan-section {
	background: linear-gradient(90deg, #165dff, #0096ff);
	padding: 30px 20px;
	text-align: center;

	.scan-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 40px;
		padding: 15px 30px;
		backdrop-filter: blur(10px);

		.scan-text {
			color: #fff;
			font-size: 18px;
			margin-left: 10px;
			font-weight: bold;
		}
	}
}

// 区块标题
.section-title {
	padding: 20px;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

// 记录列表
.record-list {
	.record-item {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 15px 20px;

		.record-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid #f5f5f5;

			.order-no {
				font-size: 14px;
				color: #666;
			}

			.status {
				font-size: 12px;
				padding: 3px 8px;
				border-radius: 3px;
			}
		}

		.record-content {
			.info-row {
				display: flex;
				margin-bottom: 8px;

				.label {
					width: 80px;
					font-size: 13px;
					color: #999;
				}

				.value {
					flex: 1;
					font-size: 13px;
					color: #333;
				}
			}
		}
	}

	.empty-state {
		text-align: center;
		padding: 50px 20px;

		.empty-text {
			font-size: 14px;
			color: #999;
		}
	}

	.load-more {
		text-align: center;
		padding: 20px;
		font-size: 14px;
		color: #999;
	}
}
</style>